<template>
  <el-progress
    :text-inside="false"
    :percentage="percentage"
    :color="customColor"
  ></el-progress>
</template>

<script>
const percentages = {
  pct1: 20,
  pct2: 40,
  pct3: 60,
  pct4: 80,
  pct5: 100,
};
const colors = {
  color1: "#f56c6c",
  color2: "#e6a23c",
  color3: "#5cb87a",
  color4: "#1989fa",
  color5: "#6f7ad3",
};
export default {
  props: {
    percentage: {
      type: Number,
      default: 20,
    },
  },
  data() {
    return {
      colorMap: new Map()
        .set(percentages.pct1, colors.color1)
        .set(percentages.pct2, colors.color2)
        .set(percentages.pct3, colors.color3)
        .set(percentages.pct4, colors.color4)
        .set(percentages.pct5, colors.color5),
    };
  },
  computed: {
    customColor: function () {
      if (this.percentage <= percentages.pct1) {
        return this.colorMap.get(percentages.pct1);
      } else if (this.percentage <= percentages.pct2) {
        return this.colorMap.get(percentages.pct2);
      } else if (this.percentage <= percentages.pct3) {
        return this.colorMap.get(percentages.pct3);
      } else if (this.percentage <= percentages.pct4) {
        return this.colorMap.get(percentages.pct4);
      } else {
        return this.colorMap.get(percentages.pct5);
      }
    },
  },
};
</script>

<style>
</style>